<template>
	<view class="index">
		<div class="video-bg">
			<video object-fit="cover" :controls="false" loop="loop" autoplay="autoplay" muted="muted" src="https://wow.v.netease.com/2025/0108/35599dab93866a2a0ed48409898776f5.mp4" poster="https://wow.v.netease.com/2025/0108/0c66abeefe14bffbf4d4384ada593274.jpg" class="video"></video>
		</div>
		<view class="version-str">
			version: {{v_str}}
		</view>
		<view class="login_box" v-if="pluginStatus == 99">
			<view class="reset-plug-in" @click="resetPluginPath">
				重设插件
			</view>
			<view class="login_title">欢迎登录团长后台</view>
			<view class="bot">
				<view class="user-acpwd">
					<input type="text" v-model="phone" class="inp" placeholder="请输入账号" placeholder-class="inpPlac"/>
				</view>
			</view>
			
			<view class="bot" style="margin-top: 15px;">
				<view class="user-acpwd">
					<input type="password" v-model="pwd" class="inp" placeholder="请输入密码" placeholder-class="inpPlac"/>
				</view>
			</view>
			<btn-a :loading="loginLoading" style="margin-top: 20px;" @btnClick="loginClick">登录</btn-a>
		</view>
		
		<view class="wow-leader-controller" v-else>
			
			<block v-if="appVersionNeedUpdate">
				<view class="update-c">
					<view class="update-title">
						检测的有新版本，请下载最新版本
					</view>
					<btn-a w="150px" h="40px" @btnClick="downloadApp">立即下载</btn-a>
				</view>
				<view class="progress-bar" v-if="appDownloadAZip">
					<!-- 进度条 -->
					<view class="progress" :style="{ width: appdprogress + '%' }"></view>
					<!-- 文字（使用混合模式） -->
					<view class="progress-text">
					  {{ appdprogressStr }}
					</view>
				</view>
			</block>
			<block v-else>
				<view class="c-navi">
					<view class="c-title">
						工具插件路径（魔兽插件路径下）
					</view>
					<btn-a w="150px" h="40px" :loading="wowPathSearching" @btnClick="searchPath">自动检测路径</btn-a>
				</view>
				<view class="plug-in" @click="selectFile">
					<view class="left">
						<view class="p-title">
							魔兽时间客户端
						</view>
						<view class="p-path">
							{{pluginPath}}
						</view>
					</view>
					<view class="icon">
						<image style="width: 100%; height: 100%;" src="/static/jt_g.png" mode=""></image>
					</view>
				</view>
				<view class="progress-bar" v-if="pluginDownloadAZip">
					<!-- 进度条 -->
					<view class="progress" :style="{ width: progress + '%' }"></view>
				
					<!-- 文字（使用混合模式） -->
					<view class="progress-text">
					  {{ progressStr }}
					</view>
				</view>
			</block>
			
			
		</view>
		
	</view>
</template>

<script>
	
	import btnA from '@/components/btn-a/btn-a.vue'
	import { api } from '@/api.js'

	export default {
		
		components: {
			btnA
		},
		
		data() {
			return {
				phone: '',
				pwd: '',
				loginLoading: false,
				pluginPath: '魔兽正式服Wow路径',
				pluginStatus: 1,
				wowPathSearching: false,
				progressStr: 0,
				progress: 0,
				pluginDownloadAZip: false,
				plug_durl: '',
				appVersionNeedUpdate: false,
				newAppZipURL: '',
				newAppZipVersion: 0,
				appDownloadAZip: false,
				appdprogress: 0,
				appdprogressStr: '',
				appDownloadPath: '',
				v_str: ''
			}
		},
		
		onLoad() {
			
			const last_acount = uni.getStorageSync('last_acount')
			if (last_acount) {
				this.phone = last_acount.phone
				this.pwd = last_acount.pwd
			}
			
			this.pluginPath = uni.getStorageSync('wow_path')
			if (!this.pluginPath || this.pluginPath.length == 0) {
				this.pluginPath = '魔兽正式服Wow路径'
			} else {
				this.checkPluginVersion()
			}
			window.electronAPI.wowPlugInPathSearch((status, path, error) => {
				this.pluginStatus = status
				if (status == 0) {
					this.pluginPath = path
				}
				if (status == 1) {
					this.pluginPath = path
					uni.setStorageSync('wow_path', path)
					this.wowPathSearching = false
					// this.downloadPluginToWow(path, 'http://api.yjh.wow.xinzhic.com/assets/LeaderManager_1.zip')
					this.checkPluginVersion()
				}
				if (status == -1) {
					this.pluginPath = error
					this.wowPathSearching = false
				}
			})
			
			window.electronAPI.onDownloadProgress((progress) => {
				this.progress = progress
				this.progressStr = `工具下载/更新进度: ${progress}%`
			})
			
			window.electronAPI.onExtractProgress((progress) => {
				this.progress = progress
				this.progressStr = `解压进度: ${progress}%`
				if (progress == 100) {
					this.pluginDownloadAZip = false
					this.pluginStatus = 99
				}
			})
			
			window.electronAPI.onPluginUpdate((toUpdate, code) => {
				this.pluginDownloadAZip = false
				if (toUpdate) {
					this.downloadPluginToWow(this.pluginPath, this.plug_durl)
				} else {
					this.pluginStatus = 99
				}
			})
			
			window.electronAPI.onDownloadProgressApp((progress) => {
				this.appdprogress = progress
				this.appdprogressStr = `下载: ${progress}%`
				if (progress == -99 && this.appDownloadAZip) {
					this.appdprogress = 0
					this.appDownloadAZip = false
					window.electronAPI.openFile(this.appDownloadPath)
				}
			})
			
			window.electronAPI.appVersion().then((vInfo) => {
				this.v_str = vInfo.v_str
			})
		},

		onUnload() {
			window.electronAPI.removeWowPlugInPathSearch()
			window.electronAPI.removeOnDownloadProgress()
			window.electronAPI.removeOnExtractProgress()
			window.electronAPI.removeOnPluginUpdate()
			window.electronAPI.removeOnDownloadProgressApp()
		},
		
		methods: {
			
			resetPluginPath() {
				this.pluginStatus = 1
				this.pluginPath = '魔兽正式服Wow路径'
				uni.removeStorageSync('wow_path')
			},
			
			checkPluginVersion() {
				this.pluginDownloadAZip = true
				this.progressStr = '插件版本检测中...'
				api.get({
					url: api.software___version(),
					success: (res) => {
						window.electronAPI.appVersion().then((vInfo) => {
							if (res.data.vnum != vInfo.v) {
								this.appVersionNeedUpdate = true
								this.newAppZipURL = res.data.app_durl
								this.newAppZipVersion = res.data.vnum
								this.v_str = vInfo.v_str
							} else {
								let p = this.pluginPath.substring(0, this.pluginPath.length - 7)
								p += 'Interface\\AddOns\\LeaderManager\\LeaderManager.toc'
								this.plug_durl = res.data.plug_durl
								window.electronAPI.pluginVersionCheck(p, res.data.pnum)
							}
						})
					}
				})
			},
			
			downloadPluginToWow(wowPath, toolZip) {
				let p = wowPath.substring(0, wowPath.length - 7)
				p += 'Interface/AddOns/'
				this.pluginDownloadAZip = true
				window.electronAPI.startDownload(toolZip, p)
			},
			
			selectFile() {
				if (this.pluginDownloadAZip) return
				if (this.pluginStatus == 0) return
				this.pluginStatus = 0
				window.electronAPI.selectFile().then((res) => {
					if (res != null) {
						const fileName = res.split('\\').pop(); // 获取文件名
						if (fileName === 'Wow.exe' || fileName === 'wow.exe') {
							this.pluginPath = res
							// this.downloadPluginToWow(res, 'http://api.yjh.wow.xinzhic.com/assets/LeaderManager_1.zip')
							uni.setStorageSync('wow_path', this.pluginPath)
							this.checkPluginVersion()
						} else {
							this.pluginPath = '只能选择 Wow.exe 或 wow.exe！'
						}
					}
					this.pluginStatus = 1
				})
			},
			
			searchPath() {
				if (this.pluginDownloadAZip) return
				this.wowPathSearching = true
				this.pluginPath = '搜索中...'
				this.pluginStatus = 0
				window.electronAPI.searchPluagInPath()
			},
			
			loginClick() {

				this.loginLoading = true
				api.post({
					url: api.user___login(),
					data: {
						phone: this.phone,
						pwd: this.pwd
					},
					success: (res) => {
						// console.log(res.data.token)
						api.setToken(res.data.token)
						uni.setStorageSync('last_acount', {
							phone: this.phone,
							pwd: this.pwd
						})
						// console.log(uni.getStorageSync('token'))
						uni.reLaunch({
							url: '/pages/root/root'
						})
					},
					fail: (error) => {
						this.loginLoading = false
						uni.showModal({
							title: '登录失败',
							content: error,
							showCancel: false
						})
					}
				})
			},
			
			downloadApp() {
				if (this.appDownloadAZip) return
				window.electronAPI.selectDownloadFile().then((res) => {
					if (res != null) {
						this.appDownloadPath = res
						this.appDownloadAZip = true
						window.electronAPI.startDownloadApp(this.newAppZipURL, res, this.newAppZipVersion)
					}
				})
			}
		}
	}
</script>

<style scoped>
	
	
	

	.progress-bar {
	  margin: 0 30px 30px 30px;
	  width: calc(100% - 60px);
	  height: 30px;
	  background-color: #1b1f21; /* 背景为黑色 */
	  position: relative;
	  border-radius: 5px;
	  overflow: hidden;
	}
	
	.progress {
	  height: 100%;
	  background-color: #c1ddeb; /* 进度条颜色为白色 */
	  transition: width 0.3s ease;
	}
	
	.progress-text {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 14px;
	  /* font-weight: bold; */
	  
	  /* 关键：让文字颜色根据背景动态变化 */
	  mix-blend-mode: difference;
	  color: #c1ddeb;
	}
	
	.plug-in {
		margin: 0 30px 30px 30px;
		width: calc(100% - 60px);
		background-color: #1b1f21;
		border-radius: 5px;
		display: flex;
		height: 80px;
		align-items: center;
	}
	
	.plug-in:hover {
		cursor: pointer;
		background-color: #252a2d;
	}
	
	.left {
		margin-left: 20px;
		width: 1px;
		flex: 1;
		margin-right: 20px;
	}
	
	.p-path {
		color: #b3a77b;
		white-space: nowrap;          /* 防止文字换行 */
		overflow: hidden;             /* 隐藏超出部分 */
		text-overflow: ellipsis;      /* 显示省略号 */
	}
	
	.p-title {
		color: wheat;
		margin-bottom: 5px;
	}
	
	.icon {
		margin-right: 20px;
		width: 25px;
		height: 25px;
	}

	.c-navi {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* background-color: rebeccapurple; */
		margin: 30px;
		width: calc(100% - 60px);
	}
	
	.c-title {
		color: wheat;
		font-size: 18px;
	}
	
	.index {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #170e09;
		background-size: cover;
	}
	
	.version-str {
		position: absolute;
		z-index: 2;
		left: 10px;
		bottom: 10px;
		color: wheat;
		font-size: 12px;
	}
	
	.video-bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 0;
	}
	
	.video {
		width: 100%;
		height: 100%;	
	}
	
	.login_title{
		 font-size: 24px;
		 color: #f7b10a;
		 padding-bottom: 40px;
	}
	
	.wow-leader-controller {
		/* background-color: orange;
		width: 300px;
		height: 300px; */
		z-index: 10;
		width: 650px;
		background-color: rgba(60, 42, 41, 0.5);
		display: flex;
		flex-direction: column;
		/* align-items: center;
		justify-content: center; */
		/* padding: 30px 50px; */
		backdrop-filter: blur(30px);
		border-radius: 5px;
		border: 1px rgba(0, 0, 0, 0.1) solid;
	}
	
	.reset-plug-in {
		position: absolute;
		right: 0;
		top: 0;
		height: 40px;
		width: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: wheat;
	}
	
	.reset-plug-in:hover {
		color: #b3a77b;
		cursor: pointer;
	}
	
	.login_box{
		width: 450px;
		background-color: rgba(60, 42, 41, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 0 50px 0;
		backdrop-filter: blur(30px);
		border-radius: 5px;
		border: 1px rgba(0, 0, 0, 0.1) solid;
	}
	
	.bot {
		border: 1px rgba(0, 0, 0, 1) solid;
		box-sizing: border-box;
	}
	
	.user-acpwd {
		width: 298px;
		height: 48px;
		border: 1px rgba(0, 0, 0, 0.1) solid;
		background-color: rgba(0, 0, 0, 0.3);
		box-sizing: border-box;
	}
	
	.inp {
		margin-left: 15px;
		width: calc(100% - 30px);
		height: 100%;
		color: #f7b10a;
	}
	
	.inpPlac {
		color: rgba(255, 255, 255, 0.6)
	}
	
	.login-btn {
		width: 300px; 
		height: 50px;
	}
	
	.update-c {
		/* width: 200rpx; */
		display: flex;
		margin: 50px;
		/* width: ; */
		align-items: center;
	}
	
	.update-title {
		width: 1px;
		flex: 1;
		color: wheat;
		font-size: 18px;
	}
	
</style>
